```tex
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%  Copyright by Collin Howland, Faith Letzkus, and Julio Trujillo    %%
%%  at Washington University in St. Louis.                            %%
%%  This work is licensed under the Creative Commons                  %%
%%  Attribution-NonCommercial-ShareAlike 5.0 International License.  %%
%%  To view a copy of this license, visit                            %%
%%  http://creativecommons.org/licenses/by-nc-sa/4.0/.               %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\newcommand{\commonfolder}{../../common-files}
\newcommand{\webcommon}{../Web_Common}

\input{\commonfolder/header}

\lhead{\bfseries SEED Labs -- Clickjacking Lab}

\begin{document}

\begin{center}
{\LARGE Clickjacking}
\end{center}

\vspace{0.1in}
\fbox{\parbox{6in}{\small 版权 \copyright\ 2021 \ \ by Collin
      Howland, Faith Letzkus, Julio Trujillo, and Steve Cole at  
      Washington University in St.\ Louis.  \\
      本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。 
      如果您对材料进行了重新混音、转换或构建，必须保留此版权说明，或者在重新发布的作品中以合理的方式再现它。}}
\vspace{0.1in}

% *******************************************
% Overview
% ******************************************* 
\section{概述}

点击劫持（也称为UI重写攻击）是一种攻击手段，它会欺骗用户在访问网页时无意中点击了他们本不想点击的内容，从而“劫持”了用户的点击。在这个实验中，我们将探索点击劫持的一种常见攻击向量：攻击者创建一个网页，加载合法页面的内容，并在其上覆盖一个或多个不可见的按钮，这些按钮会触发恶意操作。当用户尝试点击合法页面上的按钮时，浏览器会在不可见的按钮上记录点击事件，从而触发恶意操作。

\paragraph{示例场景。} 假设攻击者获得了域名 \texttt{starbux.com} 并创建了一个以该URL为网址的网站。该站点首先在 iframe 元素中加载合法的目标网站 \texttt{starbucks.com} 的内容，使得恶意的 \texttt{starbux.com} 网站看起来与合法的 \texttt{starbucks.com} 网站完全相同。随后攻击者的站点会在显示的 \texttt{starbucks} 页面上的“菜单”按钮上放置一个不可见的按钮；该按钮会触发一次点击购买攻击者产品的操作，用户登录在亚马逊账户时，无意中的点击会使得未授权的购买操作在用户的不知情和不同意的情况下完成。

\paragraph{涵盖的主题。} 本实验涵盖了以下主题：
\begin{itemize}[noitemsep]
 \item 点击劫持攻击
 \item 防御措施：框架中断和HTTP头信息
 \item iframe 和沙箱
 \item JavaScript
\end{itemize}

\paragraph{实验室环境。}
\seedenvironmentB
\nodependency

% *******************************************
% 实验室环境设置
% *******************************************j
\section{实验环境设置}

在本实验中，我们将使用两个网站。第一个是虚构企业“爱丽丝的杯子蛋糕”易受攻击的主页，可访问网址为 \url{http://www.cjlab.com}。第二个是用于劫持意图点击“爱丽丝的杯子蛋糕”页面的攻击者的恶意网页，可访问网址为 \url{http://www.cjlab-attacker.com}。我们将使用容器来设置这两个网站服务器。

% ------------------------------------------- 子部分
% -------------------------------------------
\subsection{容器设置和命令}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\input{\commonfolder/container/setup}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

% -------------------------------------------
% 子部分
% -------------------------------------------
\subsection{网页}

我们使用了两个容器：一个运行“爱丽丝的杯子蛋糕”网站（防御方，IP地址 \texttt{10.9.0.5}），另一个运行攻击者网站（IP地址 \texttt{10.9.0.105}）。这两个容器的IP地址必须在 \texttt{docker-compose.yml} 文件和 \texttt{/etc/hosts} 文件中保持一致，我们建议不要从默认值更改它们。

\paragraph{防御方容器。}
“爱丽丝的杯子蛋糕”网站托管在一个Apache web服务器上。该网站设置包括在防御方镜像文件夹中的 \texttt{apache\_defender.conf} 中。配置指定了网站的URL和存放网页应用代码的文件夹。配置中还包含HTTP响应头占位符（已被注释），在课程过程中会作为防御措施进行填充。

\begin{lstlisting}
<VirtualHost *:80>
     DocumentRoot /var/www/defender
     ServerName www.cjlab.com
#    Header set <Header-name> "<value>";
#    Header set Content-Security-Policy " \
#             <directive> '<value>'; \
#           "
</VirtualHost>
\end{lstlisting}

由于我们需要在容器内部修改防御方的网页，为了方便以及使修改后的文件在容器之外持久化，我们已将一个本地VM中的 \texttt{Labsetup/defender} 文件夹挂载到容器的 \texttt{/var/www/defender} 文件夹中。这是Apache配置中的 \texttt{DocumentRoot} 文件夹。因此，在本地VM中的任何文件修改都会被容器内的防御方web服务器识别为已修改。

\paragraph{攻击者容器。}
攻击者的网站同样托管在一个Apache web服务器上。该网站设置包括在攻击者镜像文件夹中的 \texttt{apache\_attacker.conf} 中。此网站的Apache配置如下所示：

\begin{lstlisting}
<VirtualHost *:80>
    ServerName www.cjlab-attacker.com
    DocumentRoot "/var/www/attacker"
    DirectoryIndex attacker.html
</VirtualHost>
\end{lstlisting}

由于我们需要在容器内部修改攻击者的网页，为了方便以及使修改后的文件在容器之外持久化，我们已将一个本地VM中的 \texttt{Labsetup/attacker} 文件夹挂载到容器的 \texttt{/var/www/attacker} 文件夹中。这是Apache配置中的 \texttt{DocumentRoot} 文件夹。因此，在本地VM中的任何文件修改都会被容器内的攻击者web服务器识别为已修改。

\paragraph{重要提示。} 每次对网站进行更新时，您可能需要清理浏览器缓存和/或重建并重启容器才能使更改生效，具体取决于更改的范围。

\paragraph{DNS配置。}
我们通过使用其各自的URL访问防御方网站和攻击者网站。为了将这些主机名映射到相应的IP地址，我们需要在本地VM中的 \texttt{/etc/hosts} 文件中添加以下条目。您需要使用root权限（使用 \texttt{sudo}）更改此文件。

\begin{lstlisting}
10.9.0.5        www.cjlab.com
10.9.0.105      www.cjlab-attacker.com
\end{lstlisting}

\paragraph{测试：防御方。} 编译并启动容器，然后在VM中导航至网址 \url{http://www.cjlab.com}。您应该看到一个名为“爱丽丝的杯子蛋糕”的虚构本地烘焙店页面。如果整个站点无法完全显示在您的窗口中，请使用 \texttt{Ctrl + (减号)} 和 \texttt{Ctrl + (加号)} 分别缩放以使站点适应窗口，注意站点上的页眉和页脚按钮只是占位符，并不包含实际链接。

\paragraph{测试：攻击者。} 接下来，在VM中导航至网址 \url{http://www.cjlab-attacker.com}。您应该会看到一个按钮，单击该按钮将被重定向到一个告知您已被劫持的页面。在真实攻击中，此按钮可以执行多种恶意操作。

攻击者的目的是将这个按钮叠加在显示于攻击者网站上的防御方网页上，使得受害用户在认为点击的是防御方网页上的按钮时实际上点击了恶意按钮。

% *******************************************
% 实验任务
% *******************************************
\section{实验任务} 

%%%%%%%%%% 任务1 %%%%%%%%%%
\subsection{任务1：复制那个站点！}

在 \texttt{defender} 文件夹中，您可以找到“爱丽丝的杯子蛋糕”网站的文件：\texttt{index.html} 和 \texttt{defender.css}。 在 \texttt{attacker} 文件夹中，您将找到攻击者网站的文件：\texttt{attacker.html} 和 \texttt{attacker.css}。在整个实验过程中，除了对 \texttt{defender.css} 的修改外，您需要对所有这些文件进行更改。

作为攻击者的第一步是向 \texttt{attacker.html} 添加代码以尽可能模仿“爱丽丝的杯子蛋糕”网站。一种常见的方法是使用HTML内联框架元素（iframe）。一个iframe可以嵌入另一个HTML页面。iframe的 \texttt{src} 属性指定了要嵌入的站点，当执行了iframe代码时，在当前页面上加载并显示嵌入的站点。

\paragraph{将防御方站点嵌入到攻击者站点中。}
\begin{itemize}
    \item 在 \texttt{attacker.html} 中添加一个从 \texttt{http://www.cjlab.com} 拉取内容的 iframe HTML元素。
    \item 使用 \texttt{height}, \texttt{width} 和 \texttt{position} 属性修改 \texttt{attacker.css}，使iframe覆盖整个页面，并让按钮覆盖iframe。 
    \begin{itemize}
       \item 明确设置iframe没有边框。
       \item 调查 \texttt{position} 属性的 `absolute` 和 `relative` 设置以确定应使用哪种设置。
    \end{itemize}

    \item 通过导航到攻击者网站测试您的更改。请记住，您可能需要清理浏览器缓存并重新加载页面才能在初次加载后看到所做的更改。

\end{itemize} 

\paragraph{问题：}
\begin{enumerate}
    \item 在插入iframe之后，攻击者的网站看起来如何？
\end{enumerate}

%%%%%%%%%% 任务2 %%%%%%%%%%
\subsection{任务2：让我们进行点击劫持！}

\paragraph{基本的点击劫持攻击。} 
在 \texttt{attacker.css} 中给定的一个“按钮”对象上添加代码，使恶意按钮在 \texttt{attacker.html} 上不可见，并将此按钮定位以覆盖iframe中的“探索菜单”按钮。有多种方法可以完成此任务；我们推荐使用CSS属性 \texttt{margin-left}, \texttt{margin-top}, \texttt{color} 和 \texttt{background-color}。当此任务完成后，您将拥有一个功能完善的点击劫持攻击。

\paragraph{问题：}
\begin{enumerate}
    \setcounter{enumi}{1}
    \item 攻击者的网站与防御方的网站在外观上有什么不同？

    \item 当您单击攻击者站点上的“探索菜单”按钮时会发生什么情况？

    \item 描述一个实施此任务中所使用的点击劫持样式可能对受害者用户造成的不利后果的攻击场景。
\end{enumerate}

%%%%%%%%%% 任务3 %%%%%%%%%%
\subsection{任务3：打破那个框架！}
``框破技术''是防止网页在框架中显示的一种实践，从而防御了前一个任务实施的那种类型的攻击。一种使iframe失效的方法是在网页源代码中包含脚本代码以阻止站点被嵌入——也就是说，它阻止其他网站通过iframe打开该网页。在这个任务中，我们将在防御方的网页上添加脚本代码，确保在任何展示此网页的地方，它都是顶级窗口，从而防止攻击者页面上的按钮覆盖其顶部。

\paragraph{编写框破脚本。}
 
打开文件 \texttt{defender/index.html}，其中包含“爱丽丝的杯子蛋糕”主页的代码。我们希望保护该主页免受点击劫持攻击。您的任务是填写名为 $makeThisFrameOnTop()$ 的JavaScript方法。您的代码应比较 \texttt{window.top} 和 \texttt{window.self} 以确定顶级窗口和当前站点的窗口是否为同一对象（正如它们应该的那样）。如果不是，使用 \href{https://developer.mozilla.org/en-US/docs/Web/API/Location}{Location 对象} 将顶级窗口的位置设置为与当前站点窗口相同。这应该是简单的方法且不应超过几行代码。测试一下，并确认您的脚本成功阻止了点击劫持攻击。

\paragraph{提醒：} 请记住，每次更改一个网站时，您可能需要清理浏览器缓存并重新加载页面以使所做的更改生效。

\paragraph{问题：}
\begin{enumerate}
    \setcounter{enumi}{4}
    \item 当您导航到攻击者站点后会发生什么？

    \item 单击按钮会怎样？
\end{enumerate}

%%%%%%%%%% 任务4 %%%%%%%%%%
\subsection{任务4：攻破框破技术的攻击方对策（突破那个框架）}

\paragraph{禁用框破脚本。} 
现在让我们探索如何创建一种针对前端点击劫持防御措施如框破技术的绕过方法。有多种绕过方法，例如双层框架攻击等，但在当前场景中的一种简单方法是在恶意iframe上添加 \texttt{sandbox} 属性。阅读有关 iframe 的 \texttt{sandbox} 属性的更多内容可参见 \underline{\href{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe}{这里}}，然后向 \texttt{attacker.html} 中的iframe添加 \texttt{sandbox} 属性并回答以下问题。

\paragraph{问题：}
\begin{enumerate}
    \setcounter{enumi}{6}
    \item \texttt{sandbox} 属性的作用是什么？为什么这会阻止框破技术工作？

    \item 当您在更新iframe以使用 \texttt{sandbox} 属性后导航到攻击者站点会发生什么情况？

    \item 单击攻击者站点上的按钮会发生什么？
\end{enumerate}

%%%%%%%%%% 任务5 %%%%%%%%%%
\subsection{任务5：终极的框破技术}
正如我们在上一个任务中所见，前端防御措施如框破技术可以通过其他攻击者的网页代码在受害者浏览器中的能力直接绕过，并且因此不足以防止点击劫持。为了更全面地预防点击劫持攻击，我们需要设置后端（即服务器端）防御措施。现代网站可以与常见浏览器合作提供此类防御。

前面任务中展示的前端攻击依赖于攻击者网页代码（在受害者的浏览器中运行）能够在合法网页代码有机会执行任何前端防御之前获取合法网站的内容的能力。

要阻止这种能力，已经创建了一些特殊的HTTP头，这些头指定了在何种情况下浏览器应加载或不应加载网站内容。通过在其响应请求的内容时提供其中一个这样的HTTP头，该网站可以指示浏览器仅根据具体匹配规则来显示内容，而设计此规则的目的是排除点击劫持攻击场景。这些头部并非官方HTTP规范的一部分，但由许多常见浏览器处理。

一个这样的头部称为“X-Frame-Options”，%其
%值规定了请求的内容将在何种情况下被显示。 该头部不是官方的HTTP规范的一部分，但由许多常见浏览器处理。
一个更流行且更新的是叫做“Content-Security-Policy”的头部。此头部可以包含一组多样化的键值指令以实现站点内容安全策略（CSP），从而阻止许多常见的攻击同时保留站点所需的内容共享行为。对于防止点击劫持相关的CSP头部指令是“frame-ancestors”，它规定了允许嵌入页面的合法父级。

您可以阅读更多关于XFO属性的信息
\underline{\href{https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options}{这里}},
以及更多关于CSPs的信息
\underline{\href{https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP}{这里}}。

\paragraph{修改防御方的响应头。} 打开“爱丽丝的杯子蛋糕”网站的Apache配置文件（位于防御者镜像文件夹中的 \texttt{apache_defender.conf}）。取消注释指定随页面一起提供的HTTP响应头部行，并在适当的位置替换文本以防止点击劫持攻击。具体来说，将X-Frame-Options (XFO) 头部设置为值 “DENY” 并将Content-Security-Policy (CSP) 头部包含指令 “frame-ancestors `none' ”。

\paragraph{提示：} 因为您对服务器配置进行了更改，您需要重建并重启容器才能使更改生效。

\paragraph{问题：}
\begin{enumerate}
    \setcounter{enumi}{9}
    \item X-Frame-Options HTTP头部属性是什么？为什么将其设置为 “DENY” 以防止攻击？

    \item Content-Security-Policy 头部属性是什么？为什么将其设置为 “frame-ancestors `none' ” 以防止攻击？

    \item 在每次修改每个响应头（单独一个）后，您在访问攻击者站点时会发生什么情况？点击按钮后看到的内容是什么？
\end{enumerate}

\paragraph{了解更多：} 还有其他实施点击劫持的方法，以及这里没有提及的许多可能的恶意后果。要了解有关点击劫持的更多信息，请访问开放网络应用程序安全项目（OWASP）上的点击劫持页面 \href{https://owasp.org/www-community/attacks/Clickjacking}{这里}。

% *******************************************
% 提交
% ******************************************* 
\section{提交}

\begin{quote}
\seedsubmission
\end{quote}

\end{document}
```